<template>
  <div class="containerShop">
    <div class="mains_contain">
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="uploadCon">上传</el-button>
      <div class="containList">
        <div class="containItem" v-for="(item, index) in containList" :key="index">
          <div class="containItem_top">
            <img src="@/assets/images/xhlogo.png" alt="" />
            <div class="right">
              <div>{{item.name}}</div>
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addTaskU(item)">部署</el-button>
            </div>
          </div>
          <div class="containItem_bottom">
            <ul>
              <li>
                <span> 容器版本： </span>
                <span>{{ item.version }}</span>
              </li>
              <li>
                <span> 容器大小： </span>
                <span>{{ item.filesize |formatSize }}</span>
              </li>
              <li>
                <span> 厂家： </span>
                <span>{{ item.manufactor }}</span>
              </li>
              <li>
                <span> 操作系统： </span>
                <span>{{ item.operatingSystem }}</span>
              </li>
              <li>
                <span>架构： </span>
                <span>{{ item.framework }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div style="text-align: right">
        <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>
    <el-dialog title="文件上传" :visible.sync="dialogVisible" width="640px" :close-on-click-modal="false" @close="cancle">
      <el-form ref="addForm" :model="addForm" label-width="80px" size="small" :rules="rules">
        <el-form-item label="容器名称" prop="name">
          <el-input v-model="addForm.name" clearable />
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input type="input" v-model="addForm.version" clearable />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产厂家  " prop="manufactor">
          <el-input type="input" v-model="addForm.manufactor" clearable />
        </el-form-item>
        <el-form-item label="操作系统" prop="operatingSystem">
          <el-input type="input" v-model="addForm.operatingSystem" clearable />
        </el-form-item>
        <el-form-item label="架构" prop="framework">
          <el-input type="input" v-model="addForm.framework" clearable />
        </el-form-item>
        <el-form-item label="租户" prop="tenantId">
          <el-select v-model="addForm.tenantId" style="width: 100%" placeholder="请选择">
            <el-option :label="item.name" v-for="item in tenantList" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="文件">
          <el-upload class="upload-demo" :multiple="false" :file-list="fileList" ref="upload" :limit="1" accept="*" action="api/v1/file/save" :headers="headers" :data="addForm" :auto-upload="false"
            :on-success="onUploadSuccess" :on-error="onUploadError" :before-upload="beforeUpload" :before-remove="beforeRemove" :on-change="handleChange">
            <el-button size="small" type="primary" @click="uploadList">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div style="text-align: right">
        <el-button type="primary" @click="submitUpload('addForm')" size="small">保存</el-button>
        <el-button @click="cancle" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="创建容器安装任务" :visible.sync="dialogVisibleAdd" width="640px" :close-on-click-modal="false" @close="cancleTask">
      <el-form ref="addTask" :model="addTask" label-width="80px" size="small" :rules="rulesTask">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="addTask.taskName" clearable />
        </el-form-item>
        <!-- <el-form-item label="租户" prop="tenantId">
          <el-select v-model="addTask.tenantId" style="width: 100%" placeholder="请选择">
            <el-option :label="item.name" v-for="item in tenantList" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="addTasks('addTask')" size="small">保存</el-button>
        <el-button @click="cancleTask" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="isLoading" width="200px" :close-on-click-modal="false" :show-close="false" :modal="false" class="lds">
      <loadUpload />
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { containerPage, nameCheck } from "@/api/container"
import * as tenantApi from "@/api/sys/tenant";
import { fileSave } from "@/api/link/file";
import formRule from "@/utils/formRules"

import storage from "@/utils/storage";
import loadUpload from "@/components/uploadLoading.vue";

export default {
  data() {
    return {
      isLoading: false,
      tenantList: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      typeOptions: [
        {
          value: "13",
          label: "容器文件",
        },
      ],
      files: {},
      dialogVisible: false,
      dialogVisibleAdd: false,
      addForm: {},
      addTask: {},
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        version: formRule.version,
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        tenantId: [
          { required: true, message: "必须选择租户", trigger: "change" },
        ],
      },
      rulesTask: {
        taskName: [{ required: true, message: "请输入容器名称", trigger: "blur" }],
      },
      fileList: [],
      headers: {
        Authorization: getToken(),
      },
      containList: [],
    };
  },
  mounted() {
    this.getTenantList();
    this.getPageList()
  },
  components: {
    loadUpload
  },
  methods: {
    // 获取租户数据
    getTenantList() {
      tenantApi.queryIdNamePair().then((res) => {
        this.tenantList = res.data;
      });
    },
    getPageList() {
      let data = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
      }
      containerPage(data).then(res => {
        console.log(res)
        if (res.code == '200') {
          this.containList = res.data.records
          this.pagination.total = res.data.total
          this.pagination.page = res.data.current
          this.pagination.pageSize = res.data.size;
        }
      })
    },
    deployment() {
      this.$router.push({ path: "/containerDeployment" });
    },
    addTaskU(row) {
      this.dialogVisibleAdd = true;
      this.addTask = Object.assign({}, row)
    },
    submitUpload(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.files.status || this.files.status == 'fail' ||
            this.files == undefined) {
            return this.$message({
              message: "请上传文件",
              type: "warning",
            });
          } else {
            this.isLoading = true;
            this.$refs.upload.submit();
          }
        } else {
          return false;
        }
      });
    },
    addTasks(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          nameCheck(this.addTask.taskName).then(res => {
            console.log(res);
            if (res.data) {
              this.$message({
                type: 'warning',
                message: res.message
              })
            } else {
              this.$router.push({
                path: "/containerDeployment",
                query: this.addTask
              })
              storage.setItem('isInit', 0)//判断从哪里跳转过来 0 ====容器商店 1==== 我的容器

            }
          })

        }
      });
    },
    cancleTask() {
      this.dialogVisibleAdd = false;
      this.$refs.addTask.resetFields();
    },
    cancle() {
      this.dialogVisible = false;
      this.$refs.addForm.resetFields();
      this.$refs.upload.clearFiles();
      this.files = {};
    },
    onUploadSuccess(f) {
      if (f.code === 200) {
        this.dialogVisible = false;
        this.$message({
          message: f.message,
          type: "success",
        });
        this.isLoading = false;
        this.$refs.upload.clearFiles();
        this.getPageList();
      } else {
        this.isLoading = false;
        this.files.status = 'ready'
        this.$message({
          message: f.message,
          type: "error",
        });
      }
    },
    onUploadError() {
      this.$message({
        message: "文件上传失败",
        type: "warning",
      });
      this.isLoading = false;
      return;
    },
    beforeUpload() { },
    beforeRemove() { },
    handleChange(f) {
      console.log(f)
      this.files = f
    },
    uploadList() { },
    uploadCon() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.containerShop {
  padding: 20px;
  .containList {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    // justify-content: space-between;
    margin-top: 20px;
    .containItem {
      min-width: 19%;
      max-width: 19%;
      width: 19%;
      margin-right: 1.25%;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      padding: 10px 15px;
      margin-bottom: 20px;
      .containItem_top {
        display: flex;
        align-items: center;
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1;
          margin-left: 10px;
          > div {
            font-size: 14px;
            margin-right: 10px;
          }
        }
      }
      .containItem_bottom {
        ul {
          li {
            line-height: 20px;
          }
        }
      }
    }
    div.containItem:nth-of-type(5n) {
      margin-right: -1.25%;
    }
  }
}
.lds {
  display: flex;
  // align-items: center;
  justify-content: center;
  ::v-deep.el-dialog {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    height: 150px !important;
    // margin-top: 30vh !important;

    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 150px;
    }
  }
}
</style>